<template>
	<div id="search">
		<div class="search">
			<i class="fa fa-search"></i><input type="text"/>
		</div>
		<p class="wenben">电影/电视剧/综艺</p>
		<ul>
			<li v-for="item in searchList" :key="item.id">
				<div class="first">
					<img :src="item.img" alt="">
				</div>
			
			<div class="second">
				<p class="title">{{item.title}}<span>{{item.score}}</span></p>
				<p>剧情，喜剧，犯罪</p>
				<p>{{item.date}}</p>
			</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Search',
		methods: {
			getSearchData() {
				var that = this;
				axios.get('/mock/search.json')
					.then(function(response) {
						console.log(response);
						if (response.status == 200) {
							if (response && response.data) {
								that.searchList = response.data.searchList;
							}
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},
		created() {
			this.getSearchData();
		},
		data(){
			return{
				searchList:[]
			}
		}
	}
</script>

<style scoped="scoped">
	#search{
		width: 100%;
		padding-bottom: 50px;
	}
	.search{
		width: 100%;
		padding: 10px;
		background:#eee;
		text-align: center;
		position: relative;
	}
	input{
		border: 1px solid #CCCCCC;
		border-radius: 5px;
		height: 25px;
		width: 84%;
	}
	i{
		font-size: 20px;
		position: absolute;
		top: 14px;
		left: 44px;
		
	}
	.wenben{
		color: #ccc;
		font-weight: bold;
		padding-left: 10px;
		padding-bottom: 5px;
		border: 1px solid #CCCCCC;
		line-height: 35px;		
	}
	img{
		width: 80px;
	}
	div{
		float: left;
	}
	.first{
		width: 25%;
		margin-right: 5px;
	}
	.second{
		width: 70%;
		position: relative;
	}
	.second span{
		font-weight: 100;
		color: #f90;
		float: right;
	}
	li{
		overflow: hidden;
		margin: 10px;
		padding: 10px;
		border-bottom: 1px dashed #ccc;
	}
	.title{
		font-size: 20px;
		font-weight: bold;
	}
	p{
		line-height: 26px;
	}
	.fa-search{
		
	}
</style>
